<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抽风路径</title>
    <style>
        * {
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        div {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        svg {
            border: 1px solid #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        line {
            stroke: rgb(10, 224, 74);
            stroke-dasharray: 400px;
            stroke-dashoffset: 400px;
            stroke-width: 5px;
            animation: move 3s linear infinite alternate-reverse;
            border-radius: 1px;
        }

        @keyframes move {
            0% {
                stroke-dashoffset: 400px;
            }

            100% {
                stroke-dashoffset: 0px;
            }
        }
    </style>
</head>

<body>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" class="si-glyph-view" width="500" height="500">
            <defs>
                <linearGradient id="bg1" x1="0" y1="0" x2="0" y2="100%">
                    <stop offset="0%" style="stop-color:rgb(255,255,0);" />
                    <stop offset="25%" style="stop-color:rgb(10, 224, 74);" />
                    <stop offset="50%" style="stop-color:rgb(71, 13, 231);" />
                    <stop offset="75%" style="stop-color:rgb(235, 15, 187);" />
                    <stop offset="100%" style="stop-color:rgb(255,0,0);" />
                </linearGradient>
            </defs>
            <line x1="50" y1="250" x2="450" y2="250"></line>
        </svg>
    </div>
</body>

</html>